feat: Title component #1338
feat: Title component #1338
Conversation
|
Deploy preview for fundamental-styles ready! Built with commit a52571d |
| @@ -19,7 +20,9 @@ export const backBtn = () => ` | |||
| <div class="fd-action-bar__back"> | |||
| <button aria-label="button"class="fd-button fd-button--transparent fd-button--compact sap-icon--navigation-left-arrow"></button> | |||
| </div> | |||
| <h3 class="fd-action-bar__title">Page Title</h3> | |||
| <div class="fd-action-bar__title"> | |||
| <h1 class="fd-title fd-title--h3">Page Title</h3> | |||
There was a problem hiding this comment.
Shouldn't the tag match the modifier class? <h3> ... --h3, <h1>... --h1 ? I'm afraid <h1 class="fd-title fd-title--h3"> will be very confusing for the user.
There was a problem hiding this comment.
The spec does state the visual and semantic levels can be different. While it's confusing at first, it's a big win for accessibility. Often a design wants a smaller or larger heading than actually belongs on the page. This way developers can set the correct levels while styling them differently if needed.
There was a problem hiding this comment.
matching closing tag
| <h1 class="fd-title fd-title--h3">Page Title</h3> | |
| <h1 class="fd-title fd-title--h3">Page Title</h1> |
There was a problem hiding this comment.
The spec does state the visual and semantic levels can be different. While it's confusing at first, it's a big win for accessibility. Often a design wants a smaller or larger heading than actually belongs on the page. This way developers can set the correct levels while styling them differently if needed.
This is fine but me but I think this should be specified in documentation so users are not confused!
There was a problem hiding this comment.
I've updated documentation in this component and fixed the closing tag.
| @@ -19,7 +20,9 @@ export const backBtn = () => ` | |||
| <div class="fd-action-bar__back"> | |||
| <button aria-label="button"class="fd-button fd-button--transparent fd-button--compact sap-icon--navigation-left-arrow"></button> | |||
| </div> | |||
| <h3 class="fd-action-bar__title">Page Title</h3> | |||
| <div class="fd-action-bar__title"> | |||
| <h1 class="fd-title fd-title--h3">Page Title</h3> | |||
There was a problem hiding this comment.
matching closing tag
| <h1 class="fd-title fd-title--h3">Page Title</h3> | |
| <h1 class="fd-title fd-title--h3">Page Title</h1> |
Description
Introduce Fiori 3 Title component and replace existing titles in other components with new Title component for consistency.
Screenshots
Please check whether the PR fulfills the following requirements
https://github.com/SAP/fundamental-styles/wiki/PR-Review-Checklist